<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!-- <el-tab-pane label="货币设置" name="currency" /> -->
      <el-tab-pane label="APP更新" name="appupdate" />
      <el-tab-pane label="敏感词汇" name="sensitive" />
      <el-tab-pane label="联系我们" name="service" />
      <el-tab-pane label="关于我们" name="aboutus" />
      <el-tab-pane label="用户协议" name="userterms" />
      <el-tab-pane label="注销协议" name="signout" />
      <el-tab-pane label="隐私政策" name="privace" />
      <el-tab-pane label="声明" name="compliance" />
      <el-tab-pane label="常见问题" name="problem" />
      <el-tab-pane label="相关教程" name="related" />
      <el-tab-pane label="未成年人退款公告" name="refund" />
      <el-tab-pane label="严正声明" name="upright" />
      <!-- <el-tab-pane label="友情提醒" name="Friendly" /> -->

      <div class="tab-content">
        <keep-alive>
          <component :is="curTabcompnents[activeName]" />
        </keep-alive>
      </div>
    </el-tabs>
  </div>
</template>

<script>

import CurrencyTabPane from './components/CurrencyTabPane'
import ServiceTabPane from './components/ServiceTabPane'
import AboutusTabPane from './components/AboutusTabPane'
import UsertermsTabPane from './components/UsertermsTabPane'
import PrivaceTabPane from './components/PrivaceTabPane'
import QadocTabPane from './components/QadocTabPane'
import signoutTabPane from './components/signoutTabPane'
import AppUpdateTabPane from './components/AppUpdateTabPane'
import ContactusTabPane from './components/ContactusTabPane'
import SensitiveTabPane from './components/SensitiveTabPane.vue'
import ComplianceTabPane from './components/ComplianceTabPane.vue'
import ProblemTabPane from './components/ProblemTabPane.vue'
import RelatedTabPane from './components/RelatedTabPane.vue'
import RefundTabPane from './components/RefundTabPane.vue'
import UprightTabPane from './components/UprightTabPane.vue'
import FriendlyTabPane from './components/FriendlyTabPane.vue'

export default {
  name: 'Tab',
  components: { ContactusTabPane, FriendlyTabPane, signoutTabPane, AppUpdateTabPane, CurrencyTabPane, ServiceTabPane, AboutusTabPane, UsertermsTabPane, PrivaceTabPane, QadocTabPane, SensitiveTabPane, ComplianceTabPane, ProblemTabPane, RelatedTabPane, RefundTabPane, UprightTabPane },
  data() {
    return {
      activeName: 'service',
      curTabcompnents: {
        'currency': 'CurrencyTabPane',
        'service': 'ServiceTabPane',
        'aboutus': 'AboutusTabPane',
        'userterms': 'UsertermsTabPane',
        'privace': 'PrivaceTabPane',
        'qadoc': 'QadocTabPane',
        'appupdate': 'AppUpdateTabPane',
        'signout': 'signoutTabPane',
        'contactus': 'ContactusTabPane',
        'sensitive': 'SensitiveTabPane',
        'compliance': 'ComplianceTabPane',
        'problem': 'ProblemTabPane',
        'related': 'RelatedTabPane',
        'refund': 'RefundTabPane',
        'upright': 'UprightTabPane',
        'Friendly': 'FriendlyTabPane'
      }

    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    }
  },
  created() {
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  padding:0px;
}

</style>
